* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 0.8333vw
}

body {
    max-width: 100vw;
    overflow-x: auto
}

.con-banner {
    width: 100%;
    height: 33.9063vw;
    background: url(../images/info2_banner.png) no-repeat;
    background-size: contain;
    background-position: top center
}

.con-features {
    position: relative;
    margin: 0 auto;
    margin-top: -6.3542vw;
    max-width: 68.1771vw;
    height: 25.5208vw;
    transform: skewX(-8deg);
    display: flex
}

.con-features .cf1,
.con-features .cf2,
.con-features .cf3 {
    width: 23.8542vw;
    height: 100%;
    overflow: hidden;
    background: #625ec2
}

.con-features .cf1 .content,
.con-features .cf2 .content,
.con-features .cf3 .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: grayscale(100%);
    z-index: 2;
    transform: skewX(8deg)
}

.con-features .cf1 .content img,
.con-features .cf2 .content img,
.con-features .cf3 .content img {
    position: absolute;
    width: 30.2083vw;
    height: 20.2604vw;
    z-index: 0
}

.con-features .cf1 .content .title,
.con-features .cf2 .content .title,
.con-features .cf3 .content .title {
    margin-top: 5.7292vw;
    font-size: 2.1354vw;
    color: #FFFFFF;
    text-shadow: 0.1563vw 0.2083vw 0.6771vw rgba(31, 42, 89, 0.76);
    z-index: 2
}

.con-features .cf1 .content .subtitle,
.con-features .cf2 .content .subtitle,
.con-features .cf3 .content .subtitle {
    font-size: 1.1458vw;
    text-align: center;
    color: #FFFFFF;
    z-index: 2
}

.con-features .cf1 .content .descript,
.con-features .cf2 .content .descript,
.con-features .cf3 .content .descript {
    margin: 1.1458vw 2.0833vw;
    font-size: 1.25vw;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    z-index: 2
}

.con-features .cf1 .content::after,
.con-features .cf2 .content::after,
.con-features .cf3 .content::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 300%;
    height: 300%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 1;
    transition: all .166s
}

.con-features .cf1 .content:hover,
.con-features .cf2 .content:hover,
.con-features .cf3 .content:hover {
    filter: grayscale(0%)
}

.con-features .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5.2083vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875vw;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 3.125vw;
    background: linear-gradient(180deg, #6560C4, #3339A9);
    z-index: 2
}

.con-features .footer i {
    margin: 0 6.25vw;
    transform: skewX(24deg)
}

.con-car {
    display: flex;
    flex-direction: column;
    align-items: center
}

.con-car .con-title {
    font-size: 3.125vw;
    font-weight: 600;
    color: #2A2A2A
}

.con-car .con-subtitle {
    margin-top: 1.25vw;
    display: flex;
    align-items: center;
    font-size: 1.5625vw;
    color: #2A2A2A
}

.con-car .con-subtitle img {
    margin-right: 2.5521vw;
    width: 1.875vw;
    height: 1.7708vw
}

.con-car .con-box {
    margin-top: 3.4375vw;
    padding: 0 13.75vw;
    width: 100%;
    height: 24.2188vw;
    display: flex
}

.con-car .con-box .box-item {
    position: relative;
    margin: 0 0.1042vw;
    width: 25%;
    background-color: #8F8F8F;
    transition: all .366s;
    overflow-x: hidden
}

.con-car .con-box .box-item img {
    position: absolute;
    width: 30.1vw;
    height: 100%
}

.con-car .con-box .box-item .item-title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5625vw;
    color: #FFFFFF;
    text-shadow: 0.2604vw 0.3125vw 0.1563vw rgba(31, 42, 89, 0.76);
    background-color: rgba(47, 47, 47, 0.85);
    transition: all .366s
}

.con-car .con-box .box-item .item-title span {
    width: 9.0833vw;
    text-align: center;
    user-select: none
}

.con-car .con-box .active {
    width: 30.1vw
}

.con-car .con-box .active .item-title {
    align-items: flex-start;
    background-color: rgba(47, 47, 47, 0);
    background-image: linear-gradient(rgba(77, 64, 178, 0.7), transparent)
}

.con-car .con-box .active .item-title span {
    animation: con-car-active-font forwards .466s;
    font-weight: bold
}

.con-car1 {
    margin-top: 2.6042vw
}

.con-car1 .con-subtitle {
    margin-right: 22.8646vw;
    font-size: 2.7604vw;
    font-weight: 600;
    color: #FF5050;
    align-self: flex-end
}

.con-car2 {
    margin-top: calc(5.9375vw);
    padding: 0 13.75vw
}

.con-car2 .con-mobile {
    margin-top: 3.9583vw;
    width: 100%;
    height: 40.4688vw;
    display: flex;
    justify-content: space-between;
    border: 0.1563vw solid RGBA(201, 206, 255, 1);
    background-image: linear-gradient(#e2eeff, #afccef);
    background-position: 0 0;
    border-radius: 0.8333vw;
    overflow: hidden
}

.con-car2 .con-mobile .con-mobile-item {
    padding: 1.9271vw 0 0 0;
    width: 20.9896vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: flex .3666s
}

.con-car2 .con-mobile .con-mobile-item * {
    user-select: none
}

.con-car2 .con-mobile .con-mobile-item .con-title {
    position: relative;
    min-width: 30.4167vw;
    text-align: center;
    font-size: 2.2917vw;
    color: #313131;
    opacity: 1;
    animation: con-car2-active-title .366s forwards
}

.con-car2 .con-mobile .con-mobile-item .con-title::after {
    content: "";
    position: absolute;
    bottom: -0.9375vw;
    left: 50%;
    width: 3.3333vw;
    height: 0.4167vw;
    background: #a2a2a2;
    transform: translate(-50%, 100%)
}

.con-car2 .con-mobile .con-mobile-item .con-mobile-box {
    min-width: 15.0521vw !important;
    border: 0.5208vw solid;
    border-color: #C4C4C4;
    background-color: #C4C4C4
}

.con-car2 .con-mobile .con-mobile-item:last-child {
    background-image: linear-gradient(-180deg, #cacffe, #747fe8)
}

.con-car2 .con-mobile .con-mobile-item:last-child .con-mobile-box {
    border-color: #181818;
    background-color: #181818
}

.con-car2 .con-mobile .con-mobile-item:last-child .con-mobile-box::before {
    background-image: url(../images/mobile-black.png)
}

.con-car2 .con-mobile .active.con-mobile-item:last-child {
    flex: 1
}

.con-car2 .con-mobile>.active {
    padding-top: 4.2188vw;
    padding-left: 4.6875vw;
    min-width: 20.9896vw;
    border-radius: 0.8333vw 0 0 0.8333vw;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: row-reverse
}

.con-car2 .con-mobile>.active .con-title {
    padding: 1.5104vw 2.8646vw 0 3.0208vw;
    text-align: start;
    animation: con-car2-active-font forwards .466s
}

.con-car2 .con-mobile>.active .con-title::after {
    display: none
}

.con-car2 .con-mobile>.active .con-title .title-box {
    margin-top: 2.6042vw;
    display: grid;
    grid-template-columns: repeat(3, 7.8125vw);
    grid-template-rows: repeat(3, 6.25vw);
    gap: 0.9375vw
}

.con-car2 .con-mobile>.active .con-title .title-box>.active span {
    opacity: 1
}

.con-car2 .con-mobile>.active .con-mobile-box {
    position: relative
}

.con-swiper {
    margin-top: 6.875vw;
    padding: 2.6042vw 0;
    width: 100%;
    background: url(../images/info2-swiper-back.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.con-swiper .con-title {
    font-size: 3.125vw;
    color: #FFFFFF
}

.con-swiper .con-subtitle {
    margin-top: 0.625vw;
    font-size: 1.5625vw;
    color: #E8E8E8;
    opacity: 0
}

.con-swiper .con-box {
    margin-top: 1.6146vw;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.con-swiper .con-box .con-last,
.con-swiper .con-box .con-next {
    position: relative;
    margin: 4.4271vw;
    width: 20.8333vw;
    height: 8.0208vw;
    cursor: pointer;
    display: flex
}

.con-swiper .con-box .con-last::after,
.con-swiper .con-box .con-next::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1.1979vw;
    height: 100%;
    background: url(../images/swiper-arrow.png) no-repeat;
    background-size: 100% 100%
}

.con-swiper .con-box .con-next {
    transform: rotate(180deg);
    justify-content: flex-start !important
}

.con-swiper .con-box .con-swiper-item {
    position: relative;
    padding: 0.5208vw;
    width: 53.4896vw;
    height: 27.5833vw;
    border-radius: 2.0833vw;
    overflow: hidden;
    background: linear-gradient(133deg, RGBA(92, 92, 92, 1), #000)
}

.con-swiper .con-box .con-swiper-item::after {
    content: "";
    position: absolute;
    width: calc(100% - 1.0417vw);
    border-radius: 2.0833vw;
    height: calc(100% - 1.0417vw);
    background-color: #333;
    z-index: 0
}

.con-swiper .con-box .con-swiper-item .content {
    position: absolute;
    z-index: 1;
    width: calc(100% - 1.0417vw);
    height: calc(100% - 1.0417vw);
    border-radius: 2.0833vw
}

.con-swiper .con-box .con-swiper-item>.active_l {
    animation: swiper_last forwards .966s
}

.con-swiper .con-box .con-swiper-item>.active_n {
    animation: swiper_next forwards .966s
}

.nav-box-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    border-radius: 0.7813vw;
    animation: swing-in-top-fwd1 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    white-space: nowrap;
}

.nav-box-item img {
    filter: hue-rotate(0);
    transition: all .3666s;
    width: 2.6042vw;
    height: 2.6042vw
}

.nav-box-item span {
    margin-top: 0.8333vw;
    font-size: 0.9375vw;
    color: #2E2E2E;
    opacity: 0.8;
    transition: opacity .366s
}

.con-black-box {
    margin: 7.2396vw 0 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 67.1354vw;
    background: url(../images/info2-black-box.png) no-repeat;
    background-size: 100% 100%
}

.con-black-box .title {
    margin: 3.3333vw 0 2.1875vw 0;
    font-size: 3.125vw;
    color: #262626;
    line-height: 2.5vw
}

.con-black-box .descript {
    width: 55.7292vw;
    font-size: 1.875vw;
    color: #202020;
    line-height: 3.125vw;
    text-align: center
}

.con-black-box .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 6.6146vw;
    background: #5744FD;
    display: flex;
    align-items: center;
    justify-content: center
}

.con-black-box .footer li {
    margin-right: 4.1667vw;
    font-size: 1.5625vw;
    color: #FFFFFF
}

.nav-box-item.active img {
    filter: hue-rotate(98deg);
}

.con-IM {
    padding: 0 15.5729vw;
    padding-bottom: 10.4167vw;
    display: flex
}

.con-IM .con-title {
    margin-right: 10.4167vw;
    padding-top: 10.2604vw;
    max-width: 33.8542vw;
    flex: 1
}

.con-IM .con-title .con-title-h1 {
    display: flex;
    flex-direction: column
}

.con-IM .con-title .con-title-h1 span {
    font-size: 1.4583vw;
    font-weight: 300;
    color: #2A2A2A
}

.con-IM .con-title .con-title-h1 b {
    font-size: 3.125vw;
    font-weight: 800;
    color: #2A2A2A
}

.con-IM .con-title .con-menu {
    margin-top: 2.6042vw;
    display: flex;
    flex-direction: column
}

.con-IM .con-title .con-menu .con-subtitle {
    margin-bottom: 1.0417vw;
    font-size: 1.9271vw;
    font-weight: 800;
    color: #2A2A2A
}

.con-IM .con-title .con-menu .con-menu-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 4.6042vw;
    column-gap: 2.6042vw;
    row-gap: 1.6042vw
}

.con-IM .con-title .con-menu .con-menu-items .nav-box-item span {
    white-space: nowrap
}

.con-IM .con-title .con-menu-1 {
    margin-top: 4.9479vw
}

.con-IM .con-mobile-box {
    margin-top: 9.7396vw;
    min-width: 20.4688vw;
    min-height: 42.5vw;
    overflow: hidden;
    border: 0.5208vw solid;
    border-color: #181818;
    background-color: #181818
}

.con-IM .con-mobile-box::before {
    background-image: url(../images/mobile-black.png)
}

.con-IM .con-mobile-box .content {
    padding-bottom: 4.1667vw !important;
    height: 42.5vw
}

.con-IM .con-mobile-box>.active {
    animation: swiper_next forwards .966s !important
}

.con-mobile .con-mobile-box {
    width: 15.0521vw !important;
    height: 30.1042vw !important
}

.con-car2 .con-mobile-box {
    height: 30.1042vw !important
}

.con-mobile-box {
    position: relative;
    margin-top: 2.2917vw;
    width: 10.4167vw;
    border-radius: 2.0833vw;
    overflow: hidden
}

.con-mobile-box::before {
    content: "";
    position: absolute;
    top: -0.5208vw;
    left: -0.5208vw;
    width: calc(100% + 1.0417vw);
    height: calc(100% + 0.5208vw);
    background: url(../images/mobile-gray.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1
}

.con-mobile-box .content {
    position: absolute;
    padding-bottom: 2.0958vw !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99
}

.con-mobile-box .content img {
    width: 100%;
    height: 100%
}

.con-mobile-box>.active {
    animation: swiper_next forwards .966s
}

.con-nav-box {
    margin: 0 auto;
    width: 83.0729vw;
    display: flex;
    justify-content: center;
    overflow-x: hidden
}

.con-nav-box .con-nav {
    padding: 0 1.0417vw;
    margin-top: 4.2188vw;
    width: 100%;
    display: flex
}

.con-nav-box .con-nav .con-nav-item {
    margin: 0 .78vw;
    min-width: 6.875vw;
    min-height: 5.8333vw;
    background-color: #E8E8E8;
    border-radius: 0.7813vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.con-nav-box .con-nav .con-nav-item img {
    width: 2.6563vw;
    height: 2.6563vw;
    transition: all .366s;
    filter: hue-rotate(0)
}

.con-nav-box .con-nav .con-nav-item span {
    margin-top: 0.7292vw;
    font-size: 0.9896vw;
    font-weight: 600;
    color: #2E2E2E;
    user-select: none
}

.con-nav-box .con-nav>.active {
    transform-origin: center bottom;
    transform: scale(1.1);
    background: #FFFFFF;
    box-shadow: 0vw 0.1563vw 1.0938vw 0.0521vw rgba(201, 201, 201, 0.41);
    border-radius: 0.7813vw
}

.con-nav-box .con-nav>.active span {
    font-weight: 400 !important
}

.con-nav-box .con-nav>.active img {
    filter: hue-rotate(98deg)
}

.con-car1-descript {
    margin: 3.8021vw auto 0 auto;
    width: 58.8021vw;
    font-size: 1.875vw;
    color: #2A2A2A
}

.con-cloud-harm {
    margin-top: 6.1458vw;
    display: flex;
    flex-direction: column;
    align-items: center
}

.con-cloud-harm .title {
    font-size: 3.125vw;
    font-weight: bold;
    color: #272727
}

.con-cloud-harm .span-img {
    margin-top: 0.9896vw;
    display: flex;
    align-items: center
}

.con-cloud-harm .span-img .span {
    margin-right: 2.2917vw;
    font-size: 1.8229vw;
    color: #272727;
    line-height: 3.8021vw;
    opacity: 0.8
}

.con-cloud-harm .span-img img {
    width: 40.7813vw;
    height: 21.3021vw
}

.con-cloud-harm .descript {
    margin-top: 7.8646vw;
    width: 54.6875vw;
    font-size: 1.25vw;
    color: #2A2A2A;
    line-height: 1.875vw;
    text-align: center
}

.con-cloud-harm .descript span {
    font-size: 1.5625vw
}

.con-cloud-harm .new-items {
    margin-top: 6.6146vw;
    display: flex
}

.con-cloud-harm .new-items img {
    margin: 0 2.1354vw;
    width: 24.5313vw;
    height: 17.1875vw
}

.con-products {
    width: 100%;
    height: 56.25vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #E8EEFF
}

.con-products .item {
    position: relative;
    padding-top: 7.3958vw;
    width: 24.7396vw;
    height: 36.9792vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0.2083vw solid;
    border-radius: 0.5208vw;
    background-color: #fff
}

.con-products .item img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

.con-products .item .name {
    font-size: 1.875vw;
    font-weight: 600;
    color: #282828
}

.con-products .item .en-name {
    font-size: 1.875vw;
    font-weight: 200
}

.con-products .item div {
    position: relative;
    margin: 1.4583vw 3.0208vw 0 4.2708vw;
    font-size: 1.3542vw;
    color: #282828;
    align-self: flex-start
}

.con-products .item div::after {
    content: "";
    position: absolute;
    top: 0.5208vw;
    left: -2.0833vw;
    width: 1.0417vw;
    height: 1.0417vw;
    transform: rotate(45deg)
}

.con-products .new {
    margin-right: 6.7708vw;
    border-color: #5744FD;
    box-shadow: 0.9375vw 0.9375vw 0vw #5744FD
}

.con-products .new img {
    width: 6.7188vw;
    height: 9.5833vw
}

.con-products .new div::after {
    background-color: #5744FD
}

.con-products .old {
    border-color: #FF5050;
    box-shadow: 0.9375vw 0.9375vw 0vw #FF5050
}

.con-products .old img {
    width: 19.5313vw;
    height: 5vw
}

.con-products .old div::after {
    background-color: #FF5050
}

.con-products .title {
    width: 100%;
    font-size: 3.125vw;
    color: #2A2A2A;
    line-height: 4.0104vw;
    text-align: center
}

.con-de-0 .back {
    background: url(../images/info2-de-img-1.png) no-repeat;
    background-size: cover
}

.con-de {
    width: 100%;
    height: 56.25vw;
    display: flex;
    flex-direction: column;
    align-items: center
}

.con-de .back {
    position: absolute;
    width: 100%;
    height: 56.25vw;
    z-index: -1
}

.con-de .content {
    margin: 7.5521vw auto;
    padding: 2.3438vw 5.3125vw;
    width: 67.0833vw;
    background-color: rgba(108, 99, 255, 0.5);
    border-radius: 1.0938vw;
    font-size: 2.5vw;
    color: #FFFFFF
}

.con-de .title {
    margin-top: 6.0938vw;
    font-size: 3.125vw;
    font-weight: 600;
    color: #2A2A2A
}

.con-de .subtitle {
    margin-top: 0.625vw;
    font-size: 1.5625vw;
    color: #2A2A2A;
    opacity: 0.8
}

.con-de .imgs {
    margin-top: 5.5729vw;
    display: grid;
    grid-template-areas: 'a b c'
        'a d e';
    grid-template-columns: 19.4792vw 14.4792vw 16.4583vw;
    grid-template-rows: 10.8333vw 10.4688vw;
    grid-gap: 1.0417vw
}

.con-de .imgs img:first-child {
    grid-area: a
}

.con-de1 .back {
    background: url(../images/info2-de-img-2.png) no-repeat;
    background-size: 100% 100%
}

.con-customer {
    position: relative;
    padding: 2.0313vw 0 0 0;
    width: 100%;
    height: 31.9271vw;
    background-color: #727FFF;
    display: flex;
    flex-direction: column;
    align-items: center
}



.con-customer .title {
    position: relative;
    font-size: 3.125vw;
    color: #FFFFFF;
    z-index: 1
}

.con-customer .title::after {
    content: "";
    position: absolute;
    left: calc(50% - 1.8229vw);
    bottom: -0.8854vw;
    width: 3.6458vw;
    height: 0.4688vw;
    background: #FF2828
}




.con-customer .content {
    margin-top: 3.4375vw;
    display: grid;
    grid-template-columns: repeat(4, 13.3854vw);
    grid-template-rows: repeat(2, 7.3958vw);
    grid-gap: 1.25vw
}

.con-customer .content .item {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 1.0417vw;
    opacity: 1c;
    transition: opacity .366s
}

.con-customer .content .item:hover {
    opacity: .5
}

.con-customer .page {
    margin: 2.3438vw 0 4.5313vw;
    display: flex
}

.con-customer .page .item {
    margin-right: 0.5208vw;
    width: 2.3438vw;
    height: 0.4688vw;
    background-color: #fff;
    border-radius: 0.4688vw;
    transition: background .366s;
    cursor: pointer
}

.con-customer .page .active {
    background-color: #FF2828
}

.con-customer .content.active {
    animation: swiper_next forwards .966s
}

.con-customer::after {
    content: 'Company profile';
    top: 1.8229vw;
    position: absolute;
    font-weight: bold;
    font-size: 3.75vw;
    color: rgba(81, 89, 168, 0.26);
    z-index: 0
}

img {
    width: 100%;
    height: 100%
}

@keyframes video-list-2b-animation {
    to {}
}